<template>
	<view class="container">
		<view class="left-bottom-sign"></view>
		<view class="back-btn yticon icon-zuojiantou-up"></view>
		<view class="right-top-sign"></view>
		<!-- 设置白色背景防止软键盘把下部绝对定位元素顶上来盖住输入框等 -->
		<view class="wrapper">
			<view class="left-top-sign">LOGIN</view>
			<view class="welcome">
				欢迎回来！
			</view>
			
			<view class="input-phone-msg" v-if="logintype.type==1">
				<view class="uni-column uni-phone-login">
					<input class="uni-input" type="number" maxlength="11" v-model="login_params.phone" placeholder="请输入您的手机号码"/>
					<text class="cell-more yticon icon-you"></text>
				</view>
			
				<view class="get-msg">
					<view class="uni-msg uni-column">
						<input class="uni-input" type="number" v-model="login_params.smscode" placeholder="验证码" />
					</view>
					<view :class="send_pages.send_button?'send-msg':'send-msg-disable'">
						<button  @click="show_sendmsg_alert()" :disabled="!send_pages.send_button">{{send_pages.send_name}}</button>
					</view>
				</view>
			</view>
			
			<view class="input-phone-msg" v-if="logintype.type==2">
				<view class="uni-column uni-phone-login">
					<input class="uni-input" type="number" maxlength="11" v-model="login_params.phone" placeholder="请输入您的手机号码"/>
					<text class="cell-more yticon icon-you"></text> 
				</view>
			
				<view class="uni-column uni-phone-login input-scond">
					<input class="uni-input" type="text" password v-model="login_params.pwd" placeholder="请输入您的密码"/>
					<text class="cell-more yticon icon-you"></text>
				</view>
			</view>
			
			<button class="confirm-btn" @click="toLogin">登录</button>
			
			<view class="forget-section" @click="logintypeshow()">{{logintype.name}}</view>
		</view>
		<view class="register-section">
			登录即代表已同意
			<text @click="toweburl(domain+'webapp/privacy','隐私政策')">《买购隐私政策》</text>和
			<text @click="toweburl(domain+'webapp/protocol','用户协议')">《买购用户协议》</text>
		</view>
			
		
		<!--输入邀请码-->
		<uni-popup ref="dialogInput" type="dialog">
			<uni-popup-dialog mode="input" title="输入邀请码或邀请手机号" value="" placeholder="输入邀请码或邀请手机号" :before-close="true" @close="dialogInputClose" @confirm="dialogInputConfirm"></uni-popup-dialog>
		</uni-popup>
		
		
		
		<!--确认邀请人-->
		<uni-popup ref="popup" type="center" :animation="false" :maskClick="false">
			<view class="popopempty"></view>
			<view class="popupcontent">
				<view class="popupcontent-avatar">
					<image :src="invite_user.avatar?invite_user.avatar:'../../static/buytao/buygou2.png'" mode="widthFix" lazy-load></image>
				</view>
				<view class="popupcontent-name">
					<text>{{invite_user.nickname}}</text>
				</view>
				<view class="confirm-click">
					<view class="confirm-left" @click="closeconfirmcancle">
						<text>取消</text>
					</view>
					<view class="confirm-right" @click="closeconfirm">
						<text>确认</text>
					</view>
				</view>
			</view>
		</uni-popup>
		
		
	</view>
</template>

<script>
	import {mapMutations} from 'vuex';
	import config from '../../common/config'
	import tools from '../../common/tools'
	import noauth from '../../common/api/noauth'
	import uniPopupMessage from '@/components/uni-popup/uni-popup-message'
	import uniPopupDialog from '@/components/uni-popup/uni-popup-dialog'
	import uniPopupShare from '@/components/uni-popup/uni-popup-share'
	
	export default{
		data(){
			return {
				domain:'', 
				
				login_params:{
					phone:'',
					pwd:'',
					msg_id:'',
					smscode:'',
					invite_code:'',
					is_appuser:1,
				},
				
				send_pages:{
					send_name:'发送验证码',
					send_time:60,
					send_button:true,
				},
				logintype:{
					type:1,		//1验证码登录 2密码登录
					name:'密码登录',
				},
				
				/**
				 * 邀请人信息
				 */
				invite_user:{
					nickname:'',
					avatar:'',
					invite_code:'',
				},
				
				is_old_new_user:false,		//判断是否是新用户
				
				
			}
		},
		components:{
			tools,
			noauth,
			uniPopupMessage,
			uniPopupDialog,
			uniPopupShare
		},
		onLoad(){
			this.domain=config.domain
		},
		created(){
		},
		methods: {
			//登录方式
			logintypeshow(){
				this.logintype.type == 1 ? this.logintype.type=2 : this.logintype.type=1
				this.logintype.type == 1 ? this.logintype.name='密码登录' : this.logintype.name='验证码登录'
				this.logintype.type == 1 ? this.login_params.pwd='' : this.login_params.smscode=''
			},
			
			
			//打开图形验证码
			show_sendmsg_alert(){
				//验证手机号
				if(this.login_params.phone == ''){
　　　　　　　　　　uni.showToast({
　　　　　　　　　　　　title: '请输入手机号',
　　　　　　　　　　　　icon: 'none'
　　　　　　　　　　})
					return false
				}
				//发送短信
				let send_params={phone:this.login_params.phone,type:1}
				noauth.send_code(send_params).then(res =>{
					if(res.code != 1){
						return false
					}
					this.login_params.msg_id=res.data.msg_id
					//发送验证码
					let interval = setInterval(()=>{
						this.send_pages.send_time--
						this.send_pages.send_name=this.send_pages.send_time+'s'
						this.send_pages.send_button=false
						if(this.send_pages.send_time<=0){
							this.send_pages.send_name='发送验证码'
							this.send_pages.send_time=60
							this.send_pages.send_button=true
						 	clearInterval(interval)
						}
					}, 1000);
					
				}).catch(res =>{
					
				});
			},
			
			/**
			 * 打开一一个h5地址
			 */
			toweburl(url,title){
				tools.weburl(url,title)
			},
			
			
			//根据手机号码查找用户
			get_phone_invite(){
			    return new Promise((resolve, reject) => {
					noauth.find_phone(this.login_params).then(res =>{
						if(res.code == 1){
							this.is_old_new_user = res.data.invite_code == '' ? false : true
							if(this.is_old_new_user){
								this.login_params.invite_code = res.data.invite_code
							}
							resolve('suc');
						}
					}).catch(res =>{
						reject('err')
					})
			    })
			},
			
			/**
			 * 登录方法
			 */
			async toLogin(){
				//验证手机号
				if(this.login_params.phone == ''){
	　　　　　　　　　　uni.showToast({
	　　　　　　　　　　　　title: '请输入手机号',
	　　　　　　　　　　　　icon: 'none'
	　　　　　　　　　　})
					return false
				}else{
					let myreg = /^[1][2,3,4,5,6,7,8,9][0-9]{9}$/
					if (!myreg.test(this.login_params.phone)) {
	　　　　　　　　　　uni.showToast({
	　　　　　　　　　　　　title: '手机号码错误',
	　　　　　　　　　　　　icon: 'none'
	　　　　　　　　　　})
					  return false;
					}
				}
				if(this.logintype.type == 2){
					if(this.login_params.pwd == ''){
						uni.showToast({
							title: '请输入密码',
							icon: 'none'
						})
						return false
					}
				}else{
					//验证短信验证码
					if((this.login_params.smscode == '') || (this.login_params.msg_id == '')){
	　　　　　　　　　　uni.showToast({
	　　　　　　　　　　　　title: '请发送短信验证码',
	　　　　　　　　　　　　icon: 'none'
	　　　　　　　　　　})
						return false
					}
				}
				await this.get_phone_invite()
				//邀请码
				if(this.login_params.invite_code == ''){
					this.$refs.dialogInput.open()
					return false
				}
				//登录
				uni.showNavigationBarLoading()
				noauth.login(this.login_params).then(res =>{
					if(res.code == 1){
						tools.set_storage_sync('id',res.data.id)
						tools.set_storage_sync('hasLogin',true)
						tools.set_storage_sync('user_info',res.data)
						uni.hideNavigationBarLoading()
						let pages = getCurrentPages(); // 当前页面
						let beforePage = pages[pages.length - 2]; // 前一个页面
						uni.navigateBack({
						    success: function() {
						        beforePage.onLoad(); // 执行前一个页面的onLoad方法
						    }
						 });
						
					}else{
					  uni.hideNavigationBarLoading()
	　　　　　　　　　　uni.showToast({
							title: res.msg,
							icon: 'none',
							duration:2000,
	　　　　　　　　　　})
					}
				}).catch(res =>{
					
				});
				
			},
			
			
			
			/**
			 * popup 关闭确认邀请人
			 * @param {Object} e
			 */
			closeconfirmcancle() {
				this.$refs.popup.close()
			},
			
			/**
			 * 取消邀请码
			 */
			closeconfirm() {
				this.login_params.invite_code=this.invite_user.invite_code
				this.$refs.popup.close()
			},
			
			
			/**
			 * 取消上级邀请人
			 */
			dialogInputClose(done){
				this.login_params.invite_code='910524'
				done()
			},
			
			
			/**
			 * 确认弹出上级邀请人
			 */
			dialogInputConfirm(done, val) {
				let _this = this
				if(val == ''){
　　　　　　　　　　uni.showToast({
　　　　　　　　　　　　title: '请输入邀请码或邀请手机号',
　　　　　　　　　　　　icon: 'none'
　　　　　　　　　　})
					return false
				}
				uni.showNavigationBarLoading()
				noauth.comforim({invite_code:val}).then(res =>{
					if(res.code == 1){
						done()		//关闭邀请人弹框
						uni.hideNavigationBarLoading()
						this.invite_user.nickname = res.data.nickname
						this.invite_user.avatar = res.data.avatar
						this.invite_user.invite_code=res.data.invite_code
						_this.$refs.popup.open()
					}else{
	　　　　　　　　　　	uni.showToast({
	　　　　　　　　　　　　title: res.data.msg,
	　　　　　　　　　　　　icon: 'none'
	　　　　　　　　　　	})
						return false
					}
				}).catch(res =>{
					
				});
			},
			
			
		},

	}
</script>

<style lang='scss'>
	page{
		background: #fff;
	}
	.container{
		width: 100vw;
		height: 100vh;
		background: #fff;
		position:relative;
		top:0;
		overflow: hidden;
	}
		
	.button-sp-area{
		width:80%;
		margin:0 auto;
	}
	.button-sp-area>button{
		border-radius:50upx;
	}
	
	/**确认邀请人弹框**/
	.popopempty{
		padding:0 300upx;
	}
	.popupcontent{
		margin:0 auto;
		background:#FFFFFF;
		border-radius:20upx;
		padding-top:30upx;
	}
	.popupcontent-avatar{
		text-align:center;
	}
	.popupcontent-avatar>image{
		width:150upx;
		height:150upx;
		border-radius:75upx;
	}
	.popupcontent-name{
		width:100%;
		height:50upx;
		line-height:50upx;
		font-size:40upx;
		text-align:center;
		padding:20upx 0;
	}
	.confirm-click{
		width:100%;
		height:80upx;
		line-height:80upx;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
		border-top:2upx solid #CCCCCC;
	}
	.confirm-left{
		width:49.5%;
		text-align:center;
		height:80upx;
		line-height:80upx;
		border-right:1upx solid #CCCCCC;
		border-bottom-left-radius:20upx;
	}
	.confirm-right{
		width:49.5%;
		text-align: center;
		height:80upx;
		line-height:80upx;
		border-left:1upx solid #CCCCCC;
		border-bottom-right-radius:20upx;
	}
	
	/**结束邀请人弹框**/
	
	
	
	
	
	/**收取验证码**/
	
	.input-phone-msg{
		width:90%;
		margin:0 auto;
	}
	
	.wrapper .uni-phone-login{
		border-bottom:1px solid #CCCCCC;
	}
	.input-scond{
		padding-top:50upx;
	}
	
	.get-msg{
		width: 100%;
		display:flex;
	    flex-direction: row;
	    flex-wrap: wrap;
		border-bottom:1px solid #CCCCCC;		
	}
	.uni-msg{
		width:60%;
		margin-top:50upx;
	}
	.send-msg{
		width:30%;
		margin-left:4%;
	}
	.send-msg>button{
		margin-top:50upx;
		height:70upx;
		line-height:70upx;
		border:1px solid #FF3333;
		color:#FF3333;
		background-color:#FFFFFF;
		font-size:20upx;
		border-radius:40upx;
		font-size:25upx;
	}
	
	
	.send-msg-disable{
		width:30%;
		margin-left:4%;
	}
	.send-msg-disable>button{
		margin-top:50upx;
		height:70upx;
		line-height:70upx;
		border:1px solid #CCCCCC;
		color:#FF3333;
		background-color:#FFFFFF;
		font-size:20upx;
		border-radius:40upx;
		font-size:30upx;
	}
	
	/**收取验证码结束**/
	
	.wrapper{
		position:relative;
		z-index: 90;
		background: #fff;
		padding-bottom: 40upx;
	}
	.back-btn{
		position:absolute;
		left: 40upx;
		z-index: 9999;
		padding-top: var(--status-bar-height);
		top: 40upx;
		font-size: 40upx;
		color: $font-color-dark;
	}
	.left-top-sign{
		font-size: 120upx;
		color: $page-color-base;
		position:relative;
		left: -16upx;
	}
	.right-top-sign{
		position:absolute;
		top: 80upx;
		right: -30upx;
		z-index: 95;
		&:before, &:after{
			display:block;
			content:"";
			width: 400upx;
			height: 80upx;
			background: #b4f3e2;
		}
		&:before{
			transform: rotate(50deg);
			border-radius: 0 50px 0 0;
		}
		&:after{
			position: absolute;
			right: -198upx;
			top: 0;
			transform: rotate(-50deg);
			border-radius: 50px 0 0 0;
			/* background: pink; */
		}
	}
	.left-bottom-sign{
		position:absolute;
		left: -270upx;
		bottom: -320upx;
		border: 100upx solid #d0d1fd;
		border-radius: 50%;
		padding: 180upx;
	}
	.welcome{
		padding-top: 100upx;
		padding-bottom:100upx;
		margin-left: 5%;
		font-size: 46upx;
		color: #555;
		text-shadow: 1px 0px 1px rgba(0,0,0,.3);
	}
	.input-content{
		padding: 0 60upx;
	}
	.input-item{
		display:flex;
		flex-direction: column;
		align-items:flex-start;
		justify-content: center;
		padding: 0 30upx;
		background:$page-color-light;
		height: 120upx;
		border-radius: 4px;
		margin-bottom: 50upx;
		&:last-child{
			margin-bottom: 0;
		}
		.tit{
			height: 50upx;
			line-height: 56upx;
			font-size: $font-sm+2upx;
			color: $font-color-base;
		}
		input{
			height: 60upx;
			font-size: $font-base + 2upx;
			color: $font-color-dark;
			width: 100%;
		}	
	}

	.confirm-btn{
		width: 630upx;
		height: 76upx;
		line-height: 76upx;
		border-radius: 50px;
		margin-top: 70upx;
		background: $uni-color-primary;
		color: #fff;
		font-size: $font-lg;
		&:after{
			border-radius: 100px;
		}
	}
	.forget-section{
		font-size: $font-sm+2upx;
		color: $font-color-spec;
		text-align: center;
		margin-top: 40upx;
	}
	.register-section{
		position:absolute;
		left: 0;
		bottom: 20upx;
		width: 100%;
		font-size: $font-sm+2upx;
		color: $font-color-base;
		text-align: center;
		text{
			color: $font-color-spec;
			margin-left: 10upx;
		}
	}
</style>
